<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模型开发 - 炼焦大数据智能诊断系统</title>
    <link rel="stylesheet" href="../styles/main.css">
    <link rel="stylesheet" href="../styles/page.css">
    <link rel="stylesheet" href="../styles/animate.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="../scripts/jquery.min.js"></script>
    <script src="../scripts/main.js" defer></script>
    <style>
        /* 现代渐变背景 */
        body {
            background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
            font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        /* 现代卡片样式 */
        .content-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
            padding: 40px;
            margin-bottom: 30px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .content-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }

        .content-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(to right, #2563eb, #60a5fa);
        }

        /* 图表容器 */
        .chart-container {
            background: #f5f8ff;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .chart-container:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(37, 99, 235, 0.1);
        }

        .chart-img {
            width: 100%;
            border-radius: 12px;
            transition: transform 0.3s ease;
        }

        .chart-img:hover {
            transform: scale(1.05);
        }

        /* 数据卡片 */
        .data-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 24px;
            margin-top: 30px;
        }

        .data-card {
            background: #f5f8ff;
            border-radius: 16px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .data-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(37, 99, 235, 0.1);
        }

        .data-card-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 36px;
            transition: transform 0.3s ease;
        }

        .data-card:hover .data-card-icon {
            transform: scale(1.1) rotate(15deg);
        }

        /* 进程步骤 */
        .process-steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 24px;
            margin-top: 30px;
        }

        .process-step {
            background: #f5f8ff;
            border-radius: 16px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
        }

        .process-step:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(37, 99, 235, 0.1);
        }

        .step-number {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 24px;
            font-weight: bold;
        }

        /* 信息面板 */
        .info-panel {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            background: linear-gradient(135deg, #f5f8ff 0%, #ffffff 100%);
            border-radius: 16px;
            padding: 40px;
            margin-top: 30px;
            align-items: center;
        }

        .info-panel-image {
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            min-height: 300px;
            border-radius: 12px;
            transition: transform 0.3s ease;
        }

        .info-panel-image:hover {
            transform: scale(1.05);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .info-panel {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body class="page-transition">
    <header>
        <div class="container">
            <div>
                <h1><i class="fas fa-chart-line"></i>炼焦大数据智能诊断系统</h1>
                <div class="subtitle">数据分析工作平台</div>
            </div>
            <div class="quick-tools">
                <div class="tool-search">
                    <input type="text" class="search-input" placeholder="搜索...">
                    <button class="tool-btn"><i class="fas fa-search"></i></button>
                </div>
                <button class="tool-btn"><i class="fas fa-bell"></i></button>
                <button class="tool-btn"><i class="fas fa-cog"></i></button>
                <button class="tool-btn"><i class="fas fa-user"></i></button>
            </div>
        </div>
    </header>

    <nav>
        <div class="container">
            <ul>
                <li><a href="index.html"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="intro.html"><i class="fas fa-info-circle"></i> 项目介绍</a></li>
                <li><a href="data_prep.html"><i class="fas fa-database"></i> 数据准备</a></li>
                <li><a href="eda.html"><i class="fas fa-chart-bar"></i> 探索性分析</a></li>
                <li><a href="modeling.html" class="active"><i class="fas fa-brain"></i> 模型开发</a></li>
                <li><a href="advanced.html"><i class="fas fa-rocket"></i> 高级分析</a></li>
                <li><a href="model.html"><i class="fas fa-fire"></i> 单孔分析模型</a></li>
                <li><a href="timeline.html"><i class="fas fa-clock"></i> 项目时间线</a></li>
            </ul>
            <button class="nav-toggle" id="navToggle">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </nav>

    <div class="page-header">
        <div class="page-header-bg"></div>
        <div class="container">
            <div class="page-header-content text-center">
                <h2 class="page-title fade-in">模型开发</h2>
                <p class="page-description fade-in delay-1">
                    基于机器学习和深度学习技术，结合炼焦工艺知识，构建预测、分类、异常检测等多类模型，为炼焦过程智能优化提供算法支撑。
                </p>
                <div class="page-action fade-in delay-2">
                    <a href="#model-overview" class="btn btn-outline">查看模型体系</a>
                    <a href="modeling_intro.html" class="btn btn-primary">查看详细学术介绍</a>
                </div>
            </div>
        </div>
    </div>

    <main class="page-content">
        <section id="model-overview">
            <div class="container">
                <div class="content-card fade-in">
                    <h3>模型体系概览</h3>
                    <p>炼焦大数据智能诊断系统构建了全面的模型体系，涵盖预测类、分类类、异常检测类和优化类模型，形成了覆盖炼焦全流程的模型矩阵。</p>
                    
                    <div class="row">
                        <div class="col-md-7">
                            <p>各类模型相互协同，共同支撑系统的智能分析和诊断功能。根据业务场景和数据特点，我们采用了从传统机器学习到深度学习的多种算法，确保模型精度和可解释性的平衡。</p>
                            <p>模型开发遵循严格的流程，包括需求分析、数据准备、特征工程、模型选择、训练评估和部署维护等环节，确保模型的有效性和可靠性。</p>
                        </div>
                        <div class="col-md-5">
                            <div class="chart-container">
                                <img src="../images/图片1.svg" alt="模型体系架构" class="chart-img">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="content-card fade-in delay-1">
                    <h3>预测模型</h3>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="chart-container">
                                <h3>预测模型效果展示</h3>
                                <div class="prediction-model-chart">
                                    <div class="chart-header">
                                        <div class="chart-title">炭化室温度预测</div>
                                        <div class="chart-legend">
                                            <div class="legend-item">
                                                <span class="legend-color" style="background-color: #3b82f6;"></span>
                                                <span class="legend-text">实际温度</span>
                                            </div>
                                            <div class="legend-item">
                                                <span class="legend-color" style="background-color: #10b981; border-style: dashed;"></span>
                                                <span class="legend-text">预测温度</span>
                                            </div>
                                            <div class="legend-item">
                                                <span class="legend-color" style="background-color: rgba(16,185,129,0.2);"></span>
                                                <span class="legend-text">预测区间</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="chart-body">
                                        <div class="chart-y-axis">
                                            <div class="y-label">1400°C</div>
                                            <div class="y-label">1200°C</div>
                                            <div class="y-label">1000°C</div>
                                            <div class="y-label">800°C</div>
                                            <div class="y-label">600°C</div>
                                        </div>
                                        <div class="chart-plot">
                                            <div class="actual-data-line"></div>
                                            <div class="prediction-data-line"></div>
                                            <div class="prediction-interval"></div>
                                            <div class="prediction-marker"></div>
                                            <div class="chart-grid"></div>
                                        </div>
                                    </div>
                                    <div class="chart-x-axis">
                                        <div class="x-label">-24h</div>
                                        <div class="x-label">-12h</div>
                                        <div class="x-label">现在</div>
                                        <div class="x-label">+12h</div>
                                        <div class="x-label">+24h</div>
                            </div>
                                    <div class="prediction-metrics">
                                        <div class="metric">
                                            <div class="metric-value">±1.2%</div>
                                            <div class="metric-label">平均误差</div>
                        </div>
                                        <div class="metric">
                                            <div class="metric-value">97.3%</div>
                                            <div class="metric-label">预测准确率</div>
                            </div>
                                        <div class="metric">
                                            <div class="metric-value">24h</div>
                                            <div class="metric-label">预测时长</div>
                        </div>
                            </div>
                        </div>
                                
                                <style>
                                    .prediction-model-chart {
                                        background: white;
                                        border-radius: 12px;
                                        padding: 20px;
                                        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                                        margin: 20px 0;
                                        border: 1px solid rgba(0,0,0,0.05);
                                    }
                                    
                                    .chart-header {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        margin-bottom: 20px;
                                        flex-wrap: wrap;
                                        gap: 15px;
                                    }
                                    
                                    .chart-title {
                                        font-size: 1.1rem;
                                        font-weight: 600;
                                        color: #1e40af;
                                    }
                                    
                                    .chart-legend {
                                        display: flex;
                                        gap: 15px;
                                        flex-wrap: wrap;
                                    }
                                    
                                    .legend-item {
                                        display: flex;
                                        align-items: center;
                                        gap: 5px;
                                    }
                                    
                                    .legend-color {
                                        width: 16px;
                                        height: 16px;
                                        border-radius: 4px;
                                    }
                                    
                                    .legend-text {
                                        font-size: 0.85rem;
                                        color: #475569;
                                    }
                                    
                                    .chart-body {
                                        display: flex;
                                        height: 250px;
                                        margin-bottom: 10px;
                                        position: relative;
                                    }
                                    
                                    .chart-y-axis {
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: space-between;
                                        padding-right: 15px;
                                        width: 60px;
                                        color: #64748b;
                                        font-size: 0.8rem;
                                    }
                                    
                                    .chart-plot {
                                        flex-grow: 1;
                                        position: relative;
                                        background: linear-gradient(180deg, rgba(241,245,249,0.3) 0%, rgba(241,245,249,0.6) 100%);
                                        border-radius: 8px;
                                        border: 1px solid rgba(0,0,0,0.05);
                                        overflow: hidden;
                                    }
                                    
                                    .chart-grid {
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        width: 100%;
                                        height: 100%;
                                        background-image: linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
                                                        linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
                                        background-size: 25% 25%;
                                        z-index: 1;
                                    }
                                    
                                    .actual-data-line {
                                        position: absolute;
                                        bottom: 0;
                                        left: 0;
                                        width: 60%;
                                        height: 100%;
                                        background: none;
                                        border-top: 2px solid #3b82f6;
                                        clip-path: polygon(
                                            0% 80%,
                                            10% 70%,
                                            20% 50%,
                                            30% 30%,
                                            40% 25%,
                                            50% 30%,
                                            60% 40%
                                        );
                                        z-index: 2;
                                    }
                                    
                                    .prediction-data-line {
                                        position: absolute;
                                        bottom: 0;
                                        left: 40%;
                                        width: 60%;
                                        height: 100%;
                                        background: none;
                                        border-top: 2px dashed #10b981;
                                        clip-path: polygon(
                                            0% 40%,
                                            20% 50%,
                                            40% 45%,
                                            60% 55%,
                                            80% 45%,
                                            100% 30%
                                        );
                                        z-index: 3;
                                    }
                                    
                                    .prediction-interval {
                                        position: absolute;
                                        bottom: 0;
                                        left: 40%;
                                        width: 60%;
                                        height: 100%;
                                        background: rgba(16,185,129,0.1);
                                        clip-path: polygon(
                                            0% 30%,
                                            20% 40%,
                                            40% 35%,
                                            60% 45%,
                                            80% 35%,
                                            100% 20%,
                                            100% 50%,
                                            80% 55%,
                                            60% 65%,
                                            40% 55%,
                                            20% 60%,
                                            0% 50%
                                        );
                                        z-index: 2;
                                    }
                                    
                                    .prediction-marker {
                                        position: absolute;
                                        top: 0;
                                        left: 40%;
                                        width: 2px;
                                        height: 100%;
                                        background: rgba(0,0,0,0.1);
                                        z-index: 1;
                                    }
                                    
                                    .chart-x-axis {
                                        display: flex;
                                        justify-content: space-between;
                                        padding-left: 60px;
                                        color: #64748b;
                                        font-size: 0.8rem;
                                    }
                                    
                                    .prediction-metrics {
                                        display: flex;
                                        justify-content: space-around;
                                        margin-top: 20px;
                                        padding-top: 15px;
                                        border-top: 1px solid rgba(0,0,0,0.05);
                                    }
                                    
                                    .metric {
                                        text-align: center;
                                    }
                                    
                                    .metric-value {
                                        font-size: 1.2rem;
                                        font-weight: 600;
                                        color: #1e40af;
                                    }
                                    
                                    .metric-label {
                                        font-size: 0.85rem;
                                        color: #64748b;
                                        margin-top: 5px;
                                    }
                                    
                                    @media (max-width: 768px) {
                                        .chart-header {
                                            flex-direction: column;
                                            align-items: flex-start;
                                        }
                                        
                                        .chart-body {
                                            height: 200px;
                                        }
                                    }
                                </style>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <p>预测模型是炼焦智能诊断系统的核心算法，通过对历史数据的学习，实现对关键参数的未来趋势预测。</p>
                            <h4>主要模型类型：</h4>
                            <ul>
                                <li><strong>时间序列预测</strong>：基于LSTM/GRU深度学习网络，预测温度、压力等关键参数变化</li>
                                <li><strong>质量参数预测</strong>：基于集成学习方法，预测焦炭CSR、CRI等质量指标</li>
                                <li><strong>能耗预测</strong>：结合物理模型和数据驱动方法，预测不同工况下的能源消耗</li>
                                <li><strong>寿命预测</strong>：基于退化模型，预测炉墙、炉顶等关键部件的剩余使用寿命</li>
                            </ul>
                            <p>系统通过持续学习和优化，预测精度不断提升，为生产决策提供可靠依据，实现从"经验驱动"到"数据驱动"的转变。</p>
                        </div>
                    </div>
                </div>
                
                <div class="content-card fade-in delay-2">
                    <h3>分类与异常检测模型</h3>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="chart-container">
                                <h3>异常检测效果展示</h3>
                                <div class="anomaly-detection-chart">
                                    <div class="chart-header">
                                        <div class="chart-title">炭化室温度异常检测</div>
                                        <div class="chart-legend">
                                            <div class="legend-item">
                                                <span class="legend-color" style="background-color: #3b82f6;"></span>
                                                <span class="legend-text">正常数据</span>
                                            </div>
                                            <div class="legend-item">
                                                <span class="legend-color" style="background-color: #ef4444;"></span>
                                                <span class="legend-text">异常数据</span>
                                            </div>
                                            <div class="legend-item">
                                                <span class="legend-color" style="background-color: rgba(239,68,68,0.2); border: 1px dashed #ef4444;"></span>
                                                <span class="legend-text">异常区域</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="chart-body">
                                        <div class="chart-y-axis">
                                            <div class="y-label">1400°C</div>
                                            <div class="y-label">1200°C</div>
                                            <div class="y-label">1000°C</div>
                                            <div class="y-label">800°C</div>
                                            <div class="y-label">600°C</div>
                                        </div>
                                        <div class="chart-plot">
                                            <div class="normal-data-line"></div>
                                            <div class="anomaly-data-point" style="top: 30%; left: 40%;"></div>
                                            <div class="anomaly-data-point" style="top: 25%; left: 65%;"></div>
                                            <div class="anomaly-region" style="top: 20%; left: 35%; width: 35%; height: 20%;"></div>
                                            <div class="chart-grid"></div>
                                        </div>
                                    </div>
                                    <div class="chart-x-axis">
                                        <div class="x-label">0h</div>
                                        <div class="x-label">6h</div>
                                        <div class="x-label">12h</div>
                                        <div class="x-label">18h</div>
                                        <div class="x-label">24h</div>
                                    </div>
                                    <div class="detection-metrics">
                                        <div class="metric">
                                            <div class="metric-value">95.8%</div>
                                            <div class="metric-label">检出率</div>
                                        </div>
                                        <div class="metric">
                                            <div class="metric-value">0.5%</div>
                                            <div class="metric-label">虚警率</div>
                                        </div>
                                        <div class="metric">
                                            <div class="metric-value">3.2min</div>
                                            <div class="metric-label">提前预警</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <style>
                                    .anomaly-detection-chart {
                                        background: white;
                                        border-radius: 12px;
                                        padding: 20px;
                                        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                                        margin: 20px 0;
                                        border: 1px solid rgba(0,0,0,0.05);
                                    }
                                    
                                    .chart-header {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        margin-bottom: 20px;
                                        flex-wrap: wrap;
                                        gap: 15px;
                                    }
                                    
                                    .chart-title {
                                        font-size: 1.1rem;
                                        font-weight: 600;
                                        color: #1e40af;
                                    }
                                    
                                    .chart-legend {
                                        display: flex;
                                        gap: 15px;
                                        flex-wrap: wrap;
                                    }
                                    
                                    .legend-item {
                                        display: flex;
                                        align-items: center;
                                        gap: 5px;
                                    }
                                    
                                    .legend-color {
                                        width: 16px;
                                        height: 16px;
                                        border-radius: 4px;
                                    }
                                    
                                    .legend-text {
                                        font-size: 0.85rem;
                                        color: #475569;
                                    }
                                    
                                    .chart-body {
                                        display: flex;
                                        height: 250px;
                                        margin-bottom: 10px;
                                        position: relative;
                                    }
                                    
                                    .chart-y-axis {
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: space-between;
                                        padding-right: 15px;
                                        width: 60px;
                                        color: #64748b;
                                        font-size: 0.8rem;
                                    }
                                    
                                    .chart-plot {
                                        flex-grow: 1;
                                        position: relative;
                                        background: linear-gradient(180deg, rgba(241,245,249,0.3) 0%, rgba(241,245,249,0.6) 100%);
                                        border-radius: 8px;
                                        border: 1px solid rgba(0,0,0,0.05);
                                        overflow: hidden;
                                    }
                                    
                                    .chart-grid {
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        width: 100%;
                                        height: 100%;
                                        background-image: linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
                                                        linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
                                        background-size: 25% 25%;
                                        z-index: 1;
                                    }
                                    
                                    .normal-data-line {
                                        position: absolute;
                                        bottom: 0;
                                        left: 0;
                                        width: 100%;
                                        height: 100%;
                                        background: none;
                                        border-top: 2px solid #3b82f6;
                                        clip-path: polygon(
                                            0% 80%,
                                            10% 70%,
                                            20% 50%,
                                            30% 30%,
                                            40% 25%,
                                            50% 30%,
                                            60% 40%,
                                            70% 50%,
                                            80% 65%,
                                            90% 75%,
                                            100% 80%
                                        );
                                        z-index: 2;
                                    }
                                    
                                    .anomaly-data-point {
                                        position: absolute;
                                        width: 12px;
                                        height: 12px;
                                        background: #ef4444;
                                        border-radius: 50%;
                                        transform: translate(-50%, -50%);
                                        z-index: 4;
                                        box-shadow: 0 0 0 3px rgba(239,68,68,0.3);
                                    }
                                    
                                    .anomaly-region {
                                        position: absolute;
                                        background: rgba(239,68,68,0.15);
                                        border: 1px dashed #ef4444;
                                        border-radius: 8px;
                                        z-index: 3;
                                    }
                                    
                                    .chart-x-axis {
                                        display: flex;
                                        justify-content: space-between;
                                        padding-left: 60px;
                                        color: #64748b;
                                        font-size: 0.8rem;
                                    }
                                    
                                    .detection-metrics {
                                        display: flex;
                                        justify-content: space-around;
                                        margin-top: 20px;
                                        padding-top: 15px;
                                        border-top: 1px solid rgba(0,0,0,0.05);
                                    }
                                    
                                    .metric {
                                        text-align: center;
                                    }
                                    
                                    .metric-value {
                                        font-size: 1.2rem;
                                        font-weight: 600;
                                        color: #1e40af;
                                    }
                                    
                                    .metric-label {
                                        font-size: 0.85rem;
                                        color: #64748b;
                                        margin-top: 5px;
                                    }
                                    
                                    @media (max-width: 768px) {
                                        .chart-header {
                                            flex-direction: column;
                                            align-items: flex-start;
                                        }
                                        
                                        .chart-body {
                                            height: 200px;
                                        }
                                    }
                                </style>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <p>分类与异常检测模型主要用于识别炼焦过程中的异常状态和故障类型，是系统预警功能的算法基础。</p>
                            <h4>主要模型类型：</h4>
                            <ul>
                                <li><strong>多变量异常检测</strong>：基于深度学习的自编码器模型，检测多参数协同异常</li>
                                <li><strong>时序异常检测</strong>：结合LSTM和统计方法，识别时间序列中的异常模式</li>
                                <li><strong>故障分类</strong>：基于随机森林和SVM的分类模型，辨识不同类型的设备故障</li>
                                <li><strong>质量问题归因</strong>：基于因果推断的归因模型，找出质量问题的根本原因</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="content-card fade-in delay-3">
                    <h3>优化类模型</h3>
                    <p>优化类模型旨在找到满足多目标约束的最优工艺参数组合，提升生产效率和产品质量。</p>
                    
                    <div class="process-steps">
                        <div class="process-step">
                            <div class="step-number">1</div>
                            <h4>目标函数构建</h4>
                            <p>构建考虑质量、能耗、产量等多维目标的综合优化函数</p>
                        </div>
                        <div class="process-step">
                            <div class="step-number">2</div>
                            <h4>约束条件定义</h4>
                            <p>根据设备能力和工艺要求定义参数优化的约束条件</p>
                        </div>
                        <div class="process-step">
                            <div class="step-number">3</div>
                            <h4>优化算法选择</h4>
                            <p>选择适合的优化算法，如遗传算法、粒子群算法等</p>
                        </div>
                        <div class="process-step">
                            <div class="step-number">4</div>
                            <h4>参数寻优</h4>
                            <p>在约束条件下搜索最优参数组合</p>
                        </div>
                        <div class="process-step">
                            <div class="step-number">5</div>
                            <h4>结果验证</h4>
                            <p>通过仿真和小规模试验验证优化结果</p>
                        </div>
                    </div>
                    
                    <div class="chart-container">
                        <h3>参数优化效果展示</h3>
                        <img src="../images/图片1.svg" alt="参数优化效果" class="chart-img">
                    </div>
                </div>
                
                <div class="content-card fade-in delay-3">
                    <h3>模型训练与评估</h3>
                    <p>我们建立了严格的模型训练和评估流程，确保模型的可靠性和稳定性：</p>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <h4>模型训练流程</h4>
                            <ul>
                                <li>采用交叉验证方法进行模型训练和超参数调优</li>
                                <li>使用正则化技术防止模型过拟合</li>
                                <li>针对不平衡数据集采用特殊的采样和损失函数设计</li>
                                <li>利用分布式计算加速大规模模型训练</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h4>模型评估指标</h4>
                            <ul>
                                <li>预测类模型：RMSE、MAE、R²等指标</li>
                                <li>分类模型：准确率、精确率、召回率、F1值</li>
                                <li>异常检测：AUC、检出率、虚警率</li>
                                <li>优化模型：目标函数改善幅度、约束满足度</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="info-panel">
                        <div class="info-panel-image" style="background-image: url('../images/图片2.svg');"></div>
                        <div class="info-panel-content">
                            <h3>模型在线学习</h3>
                            <p>为应对炼焦生产中的动态变化，系统支持模型的在线学习和自适应优化：</p>
                            <ul>
                                <li>基于增量学习的模型更新机制</li>
                                <li>模型性能实时监控与自动评估</li>
                                <li>历史版本管理和回滚机制</li>
                                <li>A/B测试框架支持模型安全上线</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="content-card fade-in delay-3">
                    <h3>多维数据探索</h3>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="chart-container">
                                <h3>多维数据关联分析</h3>
                                <div class="multidim-analysis-chart">
                                    <div class="chart-header">
                                        <div class="chart-title">关键参数相关性分析</div>
                                        <div class="chart-controls">
                                            <button class="control-btn active">温度</button>
                                            <button class="control-btn">压力</button>
                                            <button class="control-btn">流量</button>
                                        </div>
                                    </div>
                                    <div class="correlation-matrix">
                                        <div class="matrix-row">
                                            <div class="matrix-label">炉顶温度</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 1);">1.0</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 0.7);">0.7</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 0.4);">0.4</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 0.2);">0.2</div>
                                        </div>
                                        <div class="matrix-row">
                                            <div class="matrix-label">炉底温度</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 0.7);">0.7</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 1);">1.0</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 0.6);">0.6</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 0.3);">0.3</div>
                                        </div>
                                        <div class="matrix-row">
                                            <div class="matrix-label">侧壁温度</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 0.4);">0.4</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 0.6);">0.6</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 1);">1.0</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 0.8);">0.8</div>
                                        </div>
                                        <div class="matrix-row">
                                            <div class="matrix-label">烟道温度</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 0.2);">0.2</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 0.3);">0.3</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 0.8);">0.8</div>
                                            <div class="matrix-cell" style="background-color: rgba(59, 130, 246, 1);">1.0</div>
                                        </div>
                                    </div>
                                    <div class="matrix-column-labels">
                                        <div class="column-label">炉顶温度</div>
                                        <div class="column-label">炉底温度</div>
                                        <div class="column-label">侧壁温度</div>
                                        <div class="column-label">烟道温度</div>
                                    </div>
                                    
                                    <div class="analysis-insights">
                                        <h4>关键发现</h4>
                                        <ul>
                                            <li>侧壁温度与烟道温度高度相关 (r=0.8)</li>
                                            <li>炉顶与炉底温度呈中度相关 (r=0.7)</li>
                                            <li>炉顶温度与烟道温度相关性最低 (r=0.2)</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <style>
                                    .multidim-analysis-chart {
                                        background: white;
                                        border-radius: 12px;
                                        padding: 20px;
                                        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                                        margin: 20px 0;
                                        border: 1px solid rgba(0,0,0,0.05);
                                    }
                                    
                                    .chart-header {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        margin-bottom: 20px;
                                        flex-wrap: wrap;
                                        gap: 15px;
                                    }
                                    
                                    .chart-title {
                                        font-size: 1.1rem;
                                        font-weight: 600;
                                        color: #1e40af;
                                    }
                                    
                                    .chart-controls {
                                        display: flex;
                                        gap: 10px;
                                    }
                                    
                                    .control-btn {
                                        background: #f1f5f9;
                                        border: none;
                                        padding: 8px 15px;
                                        border-radius: 6px;
                                        font-size: 0.85rem;
                                        color: #64748b;
                                        cursor: pointer;
                                        transition: all 0.2s ease;
                                    }
                                    
                                    .control-btn.active {
                                        background: #3b82f6;
                                        color: white;
                                    }
                                    
                                    .correlation-matrix {
                                        margin-top: 20px;
                                        margin-left: 100px;
                                    }
                                    
                                    .matrix-row {
                                        display: flex;
                                        align-items: center;
                                        margin-bottom: 8px;
                                    }
                                    
                                    .matrix-label {
                                        width: 100px;
                                        text-align: right;
                                        padding-right: 15px;
                                        font-size: 0.85rem;
                                        color: #475569;
                                        margin-left: -100px;
                                    }
                                    
                                    .matrix-cell {
                                        width: 50px;
                                        height: 50px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        margin-right: 8px;
                                        border-radius: 4px;
                                        color: white;
                                        font-size: 0.9rem;
                                        font-weight: 500;
                                    }
                                    
                                    .matrix-column-labels {
                                        display: flex;
                                        margin-top: 8px;
                                    }
                                    
                                    .column-label {
                                        width: 50px;
                                        margin-right: 8px;
                                        text-align: center;
                                        font-size: 0.85rem;
                                        color: #475569;
                                        transform: rotate(-45deg);
                                        transform-origin: top left;
                                        white-space: nowrap;
                                        height: 40px;
                                    }
                                    
                                    .analysis-insights {
                                        margin-top: 40px;
                                        padding-top: 20px;
                                        border-top: 1px solid rgba(0,0,0,0.05);
                                    }
                                    
                                    .analysis-insights h4 {
                                        font-size: 1rem;
                                        color: #1e40af;
                                        margin-bottom: 10px;
                                    }
                                    
                                    .analysis-insights ul {
                                        padding-left: 20px;
                                    }
                                    
                                    .analysis-insights li {
                                        margin-bottom: 5px;
                                        font-size: 0.9rem;
                                        color: #475569;
                                    }
                                    
                                    @media (max-width: 768px) {
                                        .chart-header {
                                            flex-direction: column;
                                            align-items: flex-start;
                                        }
                                        
                                        .correlation-matrix {
                                            margin-left: 80px;
                                            overflow-x: auto;
                                        }
                                        
                                        .matrix-label {
                                            width: 80px;
                                            margin-left: -80px;
                                        }
                                        
                                        .matrix-cell {
                                            width: 40px;
                                            height: 40px;
                                        }
                                        
                                        .column-label {
                                            width: 40px;
                                        }
                                    }
                                </style>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <p>多维数据探索是炼焦大数据分析的核心环节，通过挖掘参数间的复杂关联，为后续建模提供依据。</p>
                            <h4>主要分析方法：</h4>
                            <ul>
                                <li><strong>相关性分析</strong>：识别参数间的线性和非线性关系，构建关联网络</li>
                                <li><strong>主成分分析</strong>：降维处理，提取关键特征，减少冗余</li>
                                <li><strong>聚类分析</strong>：发现数据内在分组，识别典型工况模式</li>
                                <li><strong>时序模式挖掘</strong>：提取时间序列特征，识别周期性和趋势性变化</li>
                            </ul>
                            <p>通过多维数据探索，我们能够发现传统经验难以察觉的隐藏关系，为智能诊断和优化控制提供数据支撑。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="model-development">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h2 class="section-title">模型开发</h2>
                        <div class="model-diagram">
                            <img src="../images/custom/model.svg" alt="模型开发流程图" class="img-fluid">
                        </div>
                        <p class="section-desc">
                            通过对炼焦数据的分析，开发预测模型、分类模型、异常检测和优化模型。结合随机森林、XGBoost、LSTM等多种算法，建立集成模型提高模型性能。模型经过严格的交叉验证和混淆矩阵分析，确保准确率达到95%以上，部署后通过容器化技术实现快速扩展和在线学习更新。
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <h3><i class="fas fa-chart-line"></i> 炼焦大数据智能诊断系统</h3>
                    <p>数据驱动 · 智能决策 · 持续优化</p>
                </div>
                <div class="footer-links">
                    <div class="footer-links-group">
                        <h4>快速链接</h4>
                        <ul>
                            <li><a href="index.html">首页</a></li>
                            <li><a href="intro.html">项目介绍</a></li>
                            <li><a href="data_prep.html">数据准备</a></li>
                            <li><a href="eda.html">探索性分析</a></li>
                            <li><a href="modeling.html">模型开发</a></li>
                            <li><a href="model.html">单孔分析模型</a></li>
                        </ul>
                    </div>
                    <div class="footer-links-group">
                        <h4>学术研究</h4>
                        <ul>
                            <li><a href="data_prep_intro.html">数据准备方法</a></li>
                            <li><a href="eda_intro.html">探索性分析研究</a></li>
                            <li><a href="modeling_intro.html">模型开发方法</a></li>
                            <li><a href="advanced_intro.html">高级分析技术</a></li>
                            <li><a href="model_intro.html">单孔分析模型研究</a></li>
                        </ul>
                    </div>
                    <div class="footer-links-group">
                        <h4>联系我们</h4>
                        <ul>
                            <li><i class="fas fa-envelope"></i> contact@coking-analytics.com</li>
                            <li><i class="fas fa-phone"></i> +86 123 4567 8910</li>
                            <li><i class="fas fa-map-marker-alt"></i> 中国·上海</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2023 炼焦大数据智能诊断系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 观察元素进入视口
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    }
                });
            }, {
                threshold: 0.1
            });
            
            // 为所有fade-in元素添加观察
            document.querySelectorAll('.fade-in').forEach(element => {
                observer.observe(element);
            });
        });
    </script>
</body>
</html> 